<script setup lang="ts">
import {
  Container,
  ContainerState,
  ContainerStatus,
  Pod
} from "@/views/domain/kubeHud/api/k8s";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

type Prop = {
  pod?: Pod;
  container: Container;
  status?: ContainerStatus;
};
const props = defineProps<Prop>();
const emit = defineEmits(["handleCommand"]);

const handleTerminal = () => {
  emit("handleCommand", "terminal", props.pod, props.container);
};
const handleLog = () => {
  emit("handleCommand", "log", props.pod, props.container);
};
const handleDownYaml = () => {
  emit("handleCommand", "downYaml", props.pod, props.container);
};

const handleFiles = () => {
  emit("handleCommand", "files", props.pod, props.container);
};

const handleDelete = () => {
  emit("handleCommand", "delete", props.pod, props.container);
};
</script>

<template>
  <div class="container-simple-card">
    <div class="w-full flex justify-between gap-2 items-center">
      <span>{{ container.name }}</span>
      <el-tag :type="status?.ready ? 'success' : 'danger'">
        {{ status?.ready ? "Running" : "Not Running" }}
      </el-tag>
    </div>
    <div class="w-full flex justify-between gap-2 items-center">
      <el-button-group size="small" round>
        <el-tooltip :content="$t('commons.button.terminal')">
          <el-button icon="Notebook" @click="handleTerminal" />
        </el-tooltip>
        <el-tooltip :content="$t('business.pod.pod_file')">
          <el-button icon="Files" @click="handleFiles" />
        </el-tooltip>
        <el-tooltip :content="$t('commons.button.logs')">
          <el-button icon="Document" @click="handleLog" />
        </el-tooltip>
        <el-tooltip :content="$t('commons.button.delete')">
          <el-button icon="Delete" @click="handleDelete" />
        </el-tooltip>
        <el-tooltip :content="$t('commons.button.download_yaml')">
          <el-button icon="Download" @click="handleDownYaml" />
        </el-tooltip>
      </el-button-group>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container-simple-card {
  display: flex;
  border: 1px solid #ccc8;
  border-radius: 10px;
  padding: 5px;
  flex-direction: column;
  gap: 10px;
}
</style>
